<template>
    <!-- 待签署合同 -->
    <div class="ps-a workers">

        <div class="content">
            <div class="ovf-hd p-14">
                <div class="listView bg-EBFCFA">
                    <span class="fs-35">{{projectTotal}}</span>
                    <br>
                    <span class="view">项目数量
                    </span>
                </div>
                <div class="listView bg-EBF5FC">
                    <span class="fs-35">{{contractTotal}}</span>
                    <br>
                    <span class="view">待签订合同总数
                    </span>
                </div>
            </div>

            <el-table :data="tableData" height="67%">
                <el-table-column
                    prop="projectName"
                    label="项目"
                    width="360"
                    >
                </el-table-column>
                
                <el-table-column
                    prop="waitSignContractTotal"
                    width="180"
                    label="待签订合同数量">
                </el-table-column>
                <el-table-column
                    label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" @click="signedContract(scope.row)">查看待签订合同</el-button>
                        </template>
                </el-table-column>
            </el-table>

            <el-pagination
                class="m-t-20 tt-a pagination"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>

        </div>

        <router-view />
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { 
    QueryProjectSignContractInfoList,
    QueryProjectSignContractTotal
} from '@/api/contract/workers'
    export default {
        name: 'workers',
        computed: {
            ...mapGetters([
                'userId',
                'currId',
                'roleId'
            ])
        },
        data() {
            return {
                tableData: [],
                currentPage: 1,   // 当前页
                pageSize: 10,     //每页多少条
                total: 0,          // 总数量
                projectTotal: 0,
                contractTotal: 0
            }
        },
        methods: {
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                this.currentPage = 1
                this.pageSize = val
                this.queryProjectSignContractInfoList()
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.currentPage = val
                this.queryProjectSignContractInfoList()
            },
            // 查看待签订合同
            signedContract(row) {
                console.log(row);
                this.$router.push({name:'workersSignedContract',query: row});
            },
            init() {
                this.queryProjectSignContractInfoList()
                this.getHeader()
            },
            // 头部信息
            getHeader() {
            	console.log(this.userId, 'userId')
            	console.log(this.roleId, 'roleId')
            	console.log(this.currId, 'currId')
                const params = {
                    userId: this.userId,
                    roleId: this.roleId,
                    currId: this.currId,
                    contractType: 0,
                    contractStatus: -1
                }
                QueryProjectSignContractTotal(params).then(res => {
                    if(res.code == '0') {
                        this.projectTotal = res.data.projectTotal
                        this.contractTotal = res.data.contractTotal
                    }
                })
            },
            // 表格信息
            queryProjectSignContractInfoList() {
                const params = {
                    userId: this.userId,
                    roleId: this.roleId,
                    currId: this.currId,
                    contractStatus: -1, // 合同状态
                    // projectName: '',    // 项目名称
                    // subContractorId: '',  //经理id
                    pageFlag: 1,         //是否启用分页
                    currentPage: this.currentPage,      //当前页
                    queryNumber: this.pageSize       //数量
                    
                }
                QueryProjectSignContractInfoList(params).then(res => {
                    console.log(res)
                    if(res.code == '0') {
                        this.total = res.data.resultTotal
                        this.tableData = res.data.result
                    }
                })
            }
        },
        created() {
            this.init()
        }
    }
</script>

<style lang="scss" scoped>
    .workers {
        overflow: auto;
    }
    .listView {
        float: left; 
        padding: 23px 56px;
        margin-right:42px;
        .view {
            font-size: 20px; 
            padding-left: -10px;
            color:#999;
            position:relative
        }
    }
    // /deep/.el-tabs__content {
    //     height: calc(100% - 50px);
    //     overflow: auto;
    // }
    .pagination {
        width: 100%;
    }
    .content {
        position: relative;
        height: calc(100% - 60px);
    }
</style>